<template>
  <el-form v-if="control" ref="controlEdit" :model="control" :rules="rules" label-width="140px">
    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item label="标题" prop="Name">
          <el-input v-model="control.Name" :maxlength="50" placeholder="标题" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="说明" prop="Show">
          <el-input v-model="control.Show" :maxlength="50" placeholder="说明" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="图标" prop="Icon">
          <iconChiose v-model="control.Icon" />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import iconChiose from '@/components/tools/iconChiose.vue'
export default {
  components: {
    iconChiose
  },
  props: {
    contentWidth: {
      type: Number,
      default: null
    },
    source: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      control: null,
      rules: {
        Name: [
          {
            required: true,
            message: '标题不能为空！',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  watch: {
    source: {
      handler(val) {
        if (val) {
          this.resetForm()
        } else {
          this.control = null
        }
      },
      immediate: true
    }
  },
  mounted() { },
  methods: {
    resetForm() {
      const set = {
        Id: this.source.Id,
        Name: this.source.Name,
        Show: this.source.Show
      }
      if (this.source.ControlConfig && this.source.ControlConfig.Layout) {
        const conf = this.source.ControlConfig.Layout
        set.Icon = conf.Icon
      }
      this.control = set
    },
    save() {
      const that = this
      return new Promise((resolve, reject) => {
        that.$refs['controlEdit'].validate((valid) => {
          if (valid) {
            const data = that.getData()
            if (data == null) {
              reject()
              return
            }
            resolve(data)
          } else {
            reject()
            return false
          }
        })
      })
    },
    getData() {
      const data = {
        Name: this.control.Name,
        Show: this.control.Show,
        WidthRatio: 1,
        HeightGrid: 10,
        ControlConfig: {}
      }
      data.ControlConfig.Layout = {
        Icon: this.control.Icon
      }
      return data
    }
  }
}
</script>
